﻿<%@ Page Language="C#"  MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<SeaBattle.UI.Web.Models.GameViewModel>" %>
<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Sea battle. Board setupping
</asp:Content>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server"> 
    <div class="game-builder" id="game-builder">
    <span class="info">You must plant follow ships:</span>
    <table>
        <thead>
        <td>Type</td>
        <td>Count</td>
        </thead>
        <% for (int i = 0; i < Model.Game.Configuration.Lengthes.Count; i++)
       {%><tr>
            <td><%: Model.Game.Configuration.Lengthes[i] %>-deck</td>
            <td><%: Model.Game.Configuration.Counts[i] %> pc.</td>
       </tr><% } %>
    </table>
        <div class="data-send">
            <span id="loading" ></span><br />
            <input type="button" id="ButtonTrySend" onclick="SendCells()" value="Send ships" size="25"/>    
        </div>
    </div>

    <div id="result-view" class="result-view">
        <%if(Model.Game.PlantedShips(Model.player)) {%>
        <span id="view-result-span" class="view-result-span2">You have successfully planted all the ships! Ships saved.</span>      
        <%}else{ %>
        <span id="view-result-span" class="view-result-span">Click on the cell to plant ships.</span>
        <%} %>
        <br /><span id="opponent-info-span" class="opponent-info-span"> </span>
    </div>
    <div id="game-board">     
        <table id="AllCells">
        <%--<% for (int i = 0; i < Model.Game.Configuration.FieldHeight; i++)
           {%><tr><%
                for (int j = 0; j < Model.Game.Configuration.FieldWidth; j++)
               {%><td id="cell-<%: i*Model.Game.Configuration.FieldWidth+j %>" style="cursor: hand" onclick="CellClick(<%: i*Model.Game.Configuration.FieldWidth+j%>)"></td>
        <% } %></tr><%} %>--%>
        </table>
    </div>
    <div class="hidden-panel">
        <div id="redirect-panel" class="redirect-panel">
            <span class="redirect-title">If redirection will not occured for a few seconds, 
            <%: Html.ActionLink("click here", "Index", "Play", new { id = Model.Game.Id })%></span>
        </div>
    </div>


    <script type="text/javascript">
        PlantCells("AllCells")
        function PlantCells(TableId){
            var Table = document.getElementById(TableId);
            for (var i = 0; i < <%: Model.Game.Configuration.FieldHeight%>; i++) {
                var row=Table.insertRow(-1)
                var St="";
                for (var j = 0; j < <%: Model.Game.Configuration.FieldWidth%>; j++) {
                    var Index=i*<%: Model.Game.Configuration.FieldWidth %>+j
                    St+='<td id="cell-'+Index+'" style="cursor: hand" onclick="CellClick('+Index+')"></td>'                    
                }
                row.innerHTML=St;
            }
        }
                    
        var ground = document.getElementById('cell-0').style.background;
        var border = document.getElementById('cell-0').style.border;
        function CellClick(Num) {
            var ElemId = "cell-" + Num
            var Elem = document.getElementById(ElemId)
            if (Elem.class != 'not-free') {
                eval('Elem.style.background="#00FF00"')
                eval('Elem.style.border="0px"')
                eval('Elem.class="not-free"')
            }
            else {
                eval('Elem.style.background=ground')
                eval('Elem.style.border=border')
                eval('Elem.class="free"')
            }
        }        
//---------------------------------------------
        var request
        function SendCells() {            
            var Str='';
            for (var i = 0; i < <%:Model.Game.Configuration.FieldWidth*Model.Game.Configuration.FieldHeight%>; i++) {
                if(document.getElementById('cell-'+i).class=='not-free')
                    var Temp='1'
                  else
                    var Temp='0'
                Str=Str+Temp
            }
            var url = '/Game/TryAdd?Arg='+Str;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest();
                request.onreadystatechange = processRequestChange;
                request.open("GET", url, true);
                request.send(null);
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP");
                if (request) {
                    request.onreadystatechange = processRequestChange;
                    request.open("GET", url, true);
                    request.send();
                }
            }
        }
//--------------------------------------------
        function processRequestChange() {       
            if (request.readyState == 4) {
                if (request.status == 200) {
                    if (request.responseText == "true") {
                        changeSpanText("loading", "Success sending data.")
                        eval('document.getElementById("view-result-span").style.color="#00AF00"')
                        changeSpanText("view-result-span", "You have successfully planted all the ships! Ships saved.")
                        if(!timerStarted){
                            timerOnce = window.setTimeout("SearchOpponent();", interval)
                            timerStarted=true;
                        }
                        //alert("You have successfully planted all the ships! Ships saved.")
                    } else {
                        eval('document.getElementById("view-result-span").style.color="#FF0000"')
                        changeSpanText("view-result-span", request.responseText)
                        changeSpanText("loading", "Success sending data.")
                    }
                } else {
                    changeSpanText("loading","Sending failed.")
                }
            }
            else if (request.readyState == 3 || request.readyState == 1) {
                    changeSpanText("loading","Sending and lodaing data...")               
            }
        }
        function changeSpanText(SpanId, newText) {
            try {
                document.getElementById(SpanId).innerText = newText // for IE
                document.getElementById(SpanId).textContent = newText
            } catch (e) { }            
        }
//---------------------------------------------------------------
        var timerOnce;
        var timerRedirect;
        var timerStarted=<%if(Model.Game.PlantedShips(Model.player)) {%>true<%}else{ %>false<%} %>
        var interval=5000;
        var request2;
        function SearchOpponent() {
            var url = '/Game/SearchOpponent';
            if (window.XMLHttpRequest) {
                request2 = new XMLHttpRequest();
                request2.onreadystatechange = OpponentRequestChange;
                request2.open("GET", url, true);
                request2.send(null);
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP");
                if (request2) {
                    request2.onreadystatechange = OpponentRequestChange;
                    request2.open("GET", url, true);
                    request2.send();
                }
            }            
        }
        function OpponentRequestChange(){
             if (request2.readyState == 4) {
                if (request2.status == 200) {
                    if (request2.responseText == "true") {
                        eval('document.getElementById("opponent-info-span").style.color="#00CF00"')
                        changeSpanText("opponent-info-span", "Opponent has already planted his ships!")
                        document.getElementById('game-builder').style.visibility='hidden';
                        document.getElementById('game-board').style.display='none';
                        timerRedirect = window.setTimeout("Redirect();", 3000)
                    } 
                    else 
                    {
                        if(request2.responseText == "false")
                            changeSpanText("opponent-info-span", "Opponent did not planted ships. Wait for a while...")
                            else
                            changeSpanText("opponent-info-span", request2.responseText)
                    }
                } 
                else 
                {
                    changeSpanText("opponent-info-span","Can't load information about opponent.")
                } 
                if(request2.responseText!="true" || request2.status != 200){
                    window.setTimeout("SearchOpponent();", 3000);     
                }                                    
            }
        } 
        function Redirect(){
            document.getElementById('redirect-panel').style.display=''
            document.location.href="/Game/Index/<%:Model.Game.Id %>?Length=4";
        }         
        <%if(Model.Game.PlantedShips(Model.player)) {%>timerOnce = window.setTimeout("SearchOpponent();", interval)<% } %> 
        document.getElementById('redirect-panel').style.display='none';    
    </script>
</asp:Content>